<script setup lang="ts">
import { ref, onMounted,reactive, UnwrapRef, computed } from 'vue'
import { teachClassesMember, teachClassesUser, teachClassesCreate, teachClassesupdate, teachClassesDeleted, classesImport, classesSearch, classesMemberCreate } from '../../stores/api/class'
import { useCounterStore } from '../../stores/counter'
import { useRoute, useRouter } from "vue-router";
import type { TableProps } from 'ant-design-vue';
import { ImgUrlPrefix } from '../../utils/config'
import type { Rule } from 'ant-design-vue/es/form';
import type { UploadProps } from 'ant-design-vue';
import { PictureOutlined, LoadingOutlined, QuestionCircleOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { upload } from '../../utils/upload' // 引入js
type Key = string | number;
const store = useCounterStore()
const router:any = useRouter()
const route:any = useRoute()
const info:any = ref({})
const loading = ref(false)
const imageUrl = ref<string>('def-avatar.png');
const uploading = ref<boolean>(false);
const isShowAdd = ref(false)
const fileList = ref([]);
const fileList2 = ref<UploadProps['fileList']>([])
const videoUrl = ref<string>('')
const type = ref<string>('')
const id = ref('')
const user_loading = ref(false)
const isShowAttachment = ref(false)
const isBatchImport = ref(false)
const isShowSearch = ref(false)
const tabListNoTitle = [
  {
    key: 'member',
    tab: '班级成员',
  },
//   {
//     key: 'user',
//     tab: '会员用户',
//   }
];
const noTitleKey = ref('member');
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 15,
});
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '昵称',
    dataIndex: 'nick_name',
    key: 'nick_name'
  },
  {
    title: '学员账号',
    dataIndex: 'mobile',
    key: 'mobile'
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender'
  }, 
  {
    title: '会员过期时间',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
  },
];
const pagination2 = reactive({
  total: 0,
  current: 1,
  pageSize: 15,
});
const user_columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '用户名称',
    dataIndex: 'nick_name',
    key: 'nick_name'
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender'
  },
  {
    title: '手机',
    dataIndex: 'mobile',
    key: 'mobile'
  },
//   {
//     title: '操作',
//     key: 'action',
//     fixed: 'right',
//   },
];
const data_list = ref([])
const user_list = ref([]) // 用户列表
const user:any = ref({})
const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});
interface FormState {
  name: string;
  mobile: string;
}
const formState: UnwrapRef<FormState> = reactive({
  name: '',
  mobile: ''
});

interface FormState2 {
  nick_name:string;
  mobile: string;
  gender: Number | string;
  permission: Number | undefined;
  thumbnail: string;
  expire_time:Number | string;
  password: string;
}
const formRef = ref();
const labelCol = { span: 3 };
const wrapperCol = { span: 24 };
const formState2: UnwrapRef<FormState2> = reactive({
  nick_name: '', //昵称
  mobile: '', //账号
  gender: '', // 性别
  permission: undefined, // 权限
  thumbnail: 'def-avatar.png', // 封面图
  expire_time: '', //到期时间
  password: '' // 密码
});
const rules: Record<string, Rule[]> = {
  nick_name: [
    { required: true, message: '请输入学员昵称', trigger: 'change' },
  ],
  mobile: [
    { required: true, message: '请输入学员账号', trigger: 'change' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确' }
  ],
  permission: [{ required: true, message: '请选择会员', trigger: 'change' }],
  status: [{ required: true, message: '请选择权限', trigger: 'change' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'change'  }
  ],
//   expire_time: [{ type: 'string' as const, required: true, message: '请选择时间' }]
};


interface FormState3 {
   file:string;
}
const formState3: UnwrapRef<FormState3> = reactive({
  file: ''
});

const rules3: Record<string, Rule[]> = {
//   file: [
//     { required: true, message: '请选择文件', trigger: 'change' },
//   ]
};
const fileList3 = ref([])
const loading3 = ref(false)
const importInfo:any = ref({})
// 班级成员列表
const getClassesList = () => {
    loading.value = true
    teachClassesMember({ page:  pagination.current, id: route.query.id }, 'post').then((res: any) => {
        console.log(res)
        if (res.code == 200) {
            data_list.value = res.data.items
            pagination.total = res.data.total
        }
        loading.value = false
    }).catch((err: any) => {
        console.log(err)
        loading.value = false
    })
}

const userList = computed(() => {
  return data_list.value.map(item => {
       return { ...item, imgUrls: item.avatar && item.avatar == 'def-avatar.png' ? imgUrl(item.avatar) : getImgUrl(item.avatar),created_at: store.timestampChangDate(item.created_at * 1000) }
  })
})
// 用户会员
const getClassesUser = () => {
    user_loading.value = true
    teachClassesUser({  page:  pagination2.current, id: route.query.id }, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            user_list.value = res.data.items
            pagination2.total = res.data.total
        } else {
            message.error(res.msg);
        }
        user_loading.value = false
    }).catch((err: any) => {
        console.log(err)
        user_loading.value = false
    })
}
const userInfo:any = computed(() => {
    return { ...user.value, avatar: user.value.avatar && user.value.avatar == 'def-avatar.png' ? imgUrl(user.value.avatar) : getImgUrl(user.value.avatar),created_at: store.timestampChangDate(user.value.created_at * 1000), updated_at: store.timestampChangDate(user.value.updated_at * 1000), status: user.value.status > 100000000 ? store.timestampChangDate(user.value.status * 1000) : '' }
})

// 搜索
const getClassesSearch = () => {
    classesSearch({  mobile: formState.mobile, name: formState.name }, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            user.value = res.data
        }
    }).catch((err: any) => {
        console.log(err)
    })
}

// 图片地址拼接
const getImgUrl = (val) => {
    const url = ImgUrlPrefix(val)
    return url
}

// 截取字符串
const getExtractString = (val) => {
    if(val) {
        const startIndex = val.indexOf('/') + 1
        const url = val.substring(startIndex);
        return url
    } else{
        return ''
    }
}

// 查看更多
const seeMore = (val) => {
    isShowAttachment.value = true
}

// 搜索
const onSubmit = () => {
    getClassesSearch()
}
// 取消
const onCancel = () => {
    formState.name = ''
    formState.mobile = ''
    getClassesList()
}
// 添加
const onAdd = () => {
    if(userInfo.value.id) {
        classesMemberCreate({  id: userInfo.value.id, classesId: route.query.id }, 'post').then((res: any) => {
            console.log(res)
            if(res.code == 200) {
                message.success('添加成功');
                getClassesList()
            }
        }).catch((err: any) => {
            console.log(err)
        })
    } else{
        message.info('暂无用户，请搜索');
    }

}
// 新增
const getAdd = () => {
    // isShowAdd.value = true
    type.value = 'add'
    // router.push('/assignHomework')
}
const handleTableChange: TableProps['onChange'] = (
  pag: { pageSize: number; current: number }
) => {
  console.log(pag?.current)
  pagination.current = pag?.current
  getClassesList()
};

// 用户列表分页
const handleTableChange2: TableProps['onChange'] = (
  pag: { pageSize: number; current: number }
) => {
  console.log(pag?.current)
  pagination2.current = pag?.current
  getClassesUser()
};

// 取消
const resetForm = () => {
  formRef.value.resetFields();
  imageUrl.value = 'def-avatar.png'
  fileList.value = []
  isShowAdd.value = false
}

// 更新
const handleUpdate = (val:any) => {
    type.value = 'edit'
    isShowAdd.value = true
    id.value = val.id
    formState2.permission = val.status > 10000 ? 20 : 10, // 0不限制时间  时间戳到期自动解锁
    formState2.nick_name = val.nick_name
    formState2.thumbnail = val.avatar
    formState2.mobile = val.mobile
    formState2.gender = val.gender
    formState2.password = val.password
    formState2.expire_time = val.status > 10000 ? store.timestampChangDate(val.status * 1000) : ''
    imageUrl.value = val.imgUrls
    console.log(formState2,val.status, '更新')
}

// 查看
const handleSee = (val:any) => {
    router.push({ path: '/classesDetails', query: { id: val.id }})
}

// 上课记录
const handleRecord = (val:any) => {
    router.push({ path: '/classRecord', query: { id: val.id }})
}

// 删除
const handleDelete = (id:any) => {
    console.log('删除',id)
    teachClassesDeleted({
        "id": id
    }, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            message.success('删除成功');
            getClassesList()
        } else {
            message.error(res.message);
        }
    }).catch((err: any) => {
        console.log(err)
    })
}

const onTabChange = (value: string) => {
  console.log(value);
  noTitleKey.value = value;
  if(value == 'member') {
    getClassesList()
  } else if(value == 'user') {
    getClassesUser()
  }
}

// 添加
const handleAdd = () => {
    isShowAdd.value = true
    imageUrl.value = 'def-avatar.png'
    formState2.thumbnail = 'def-avatar.png'
    type.value = 'add'
    // getClassesUser()
}

// 批量导入
const handleBatchImport = () => {
    isBatchImport.value = true
}

// 搜索
const handleSearch = () => {
    isShowSearch.value = true
}
const hasSelected = computed(() => state.selectedRowKeys.length > 0);

// 图片上传--删除
const handleRemove: UploadProps['onRemove'] = file => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
  imageUrl.value = ''
};
// 图片上传之前
const beforeUpload: UploadProps['beforeUpload'] = file => {
  fileList.value = [...(fileList.value || []), file];
  console.log(fileList.value)
  return true;
};
// 图片上传
const handleUpload = (data) => {
  uploading.value = true;
  console.log(fileList.value, data,'handleUpload')
  upload(data.file,res => {
      console.log(res,'ddddd')
      if(res) {
            const startIndex = res.indexOf('/') + 1;
            const urls = res.substring(startIndex);
            formState2.thumbnail = urls
            imageUrl.value = getImgUrl(urls)
            console.log(urls)
      }
      uploading.value = false;
  })
};

// 调用新增接口
const addUser = () => {
    let obj = {
        "status": formState2.permission == 10 ? 0 : store.getTimestamp(formState2.expire_time), // 0不限制时间  时间戳到期自动解锁
        "nick_name": formState2.nick_name,
        "avatar": formState2.thumbnail,
        "mobile": formState2.mobile,
        "gender":formState2.gender,
        "password": formState2.password
      }
    console.log(obj)
    teachClassesCreate({ id: route.query.id, ...obj }, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            getClassesList()
            message.success(res.message);
            formRef.value.resetFields();
            isShowAdd.value = false
            imageUrl.value = ''
            fileList.value = []
        } else {
            message.error(res.msg);
        }
        state.loading = false
    }).catch((err: any) => {
        console.log(err)
        state.loading = false
    })
}

// 调用编辑用户
const editUser = () => {
    let obj = {
        id: id.value,
        "status": formState2.permission == 10 ? 0 : store.getTimestamp(formState2.expire_time), // 0不限制时间  时间戳到期自动解锁
        "nick_name": formState2.nick_name,
        "avatar": formState2.thumbnail,
        "mobile": formState2.mobile,
        "gender":formState2.gender,
        "password": formState2.password
      }
    console.log(obj)
    teachClassesupdate({ ...obj }, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            getClassesList()
            message.success(res.message);
            formRef.value.resetFields();
            isShowAdd.value = false
            imageUrl.value = ''
            fileList.value = []
        } else {
            message.error(res.msg);
        }
        state.loading = false
    }).catch((err: any) => {
        console.log(err)
        state.loading = false
    })
}
// 添加
const start = () => {
  state.loading = true;
  formRef.value
    .validate()
    .then(() => {
        console.log('values', formState2);
        if(type.value == 'add') {
            addUser()
        }else if(type.value == 'edit') {
            console.log('编辑')
            editUser()
        }
    })
    .catch(error => {
        console.log('error', error);
        state.loading = false
    });
};
// 选择框事件
const onSelectChange = (selectedRowKeys: Key[]) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};

const imgUrl = (val) => {
    console.log(val,'val')
    if(val == 'def-avatar.png') {
        return new URL(`../../assets/${val}`, import.meta.url).href
    } else {
        return val
    }
}

const handleRemove3: UploadProps['onRemove'] = file => {
  const index = fileList3.value.indexOf(file);
  const newFileList = fileList3.value.slice();
  newFileList.splice(index, 1);
  fileList3.value = newFileList;
};

const beforeUpload3: UploadProps['beforeUpload'] = file => {
  fileList3.value = [file];
  return false;
};

const handleUpload3 = () => {
  console.log(fileList3.value,'handleUpload')
  if(fileList3.value.length > 0){
    loading3.value = true
    let obj = {
        classesId: route.query.id,
        iFile: fileList3.value[0]
    }
    let formData  = new FormData() //传formdata对象方法
    formData.append('iFile', fileList3.value[0]);
    formData.append('classesId', route.query.id);
    console.log('上传', obj, formData)
    classesImport(formData, 'post').then((res: any) => {
        console.log(res)
        if(res.code == 200) {
            getClassesList()
            message.success('提交成功');
            importInfo.value = res.data
            // isBatchImport.value = false
            fileList3.value = []
        } else {
            message.error(res.msg);
        }
        loading3.value = false
    }).catch((err: any) => {
        console.log(err)
        loading3.value = false
    })
  } else {
    message.info('请选择上传文件');
  }
}
const resetForm3 = () => {
    fileList3.value = []
    importInfo.value = {}
    isBatchImport.value = false
}
onMounted(() => {
    getClassesList()
    // getHomeworkUser() // 用户列表
})
</script>

<template>
    <div class="classesMember">
        <a-page-header
            style="border: none;padding: 0"
            title="班级成员"
            sub-title=""
            @back="() => $router.go(-1)"
        />
        <a-card
            style="width: 100%"
            :tab-list="tabListNoTitle"
            :active-tab-key="noTitleKey"
            @tabChange="key => onTabChange(key)"
        >
            <div v-if="noTitleKey === 'member'">
                <div class="list-box">
                    <a-table :columns="columns" :pagination="pagination"
                        :loading="loading" :data-source="userList" @change="handleTableChange">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key === 'id'">
                                <span>
                                    {{ record.id }}
                                </span>
                            </template>
                            <template v-if="column.key === 'nick_name'">
                                <span>
                                {{ record.nick_name }}
                                </span>
                            </template>
                            <template v-if="column.key === 'gender'">
                                <span v-if="record.gender == 1">男</span>
                                <span v-else-if="record.gender == 2">女</span>
                                <span v-else>--</span>
                            </template>
                            <template v-if="column.key === 'mobile'">
                                <span>
                                {{ record.mobile }}
                                </span>
                            </template>
                            <template v-else-if="column.key === 'avatar'">
                                <span>
                                    <img :src="record.imgUrls ? record.imgUrls : ''" alt="" class="thumbnail_">
                                </span>
                            </template>
                            <template v-if="column.key === 'status'">
                                <span>
                                {{ record.status > 100000000 ? store.timestampChangDate(record.status * 1000) : '--'  }}
                                </span>
                            </template>
                            <template v-if="column.key === 'created_at'">
                                <span>
                                {{ record.created_at}}
                                </span>
                            </template>
                            <template v-else-if="column.key === 'action'">
                                <span style="margin-right: 10px">
                                    <a @click="handleUpdate(record)">编辑</a>
                                </span>
                                <span style="margin-right: 10px">
                                    <a-popconfirm title="是否删除吗？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record.id)"> 
                                        <template #icon><question-circle-outlined style="color: red" /></template>
                                        <a>删除</a>
                                    </a-popconfirm>
                                </span>
                                <span style="margin-right: 10px">
                                    <a @click="handleSee(record)">查看</a>
                                </span>
                                <span>
                                    <a @click="handleRecord(record)">上课记录</a>
                                </span>
                            </template>
                        </template>
                    </a-table>
                </div>
            </div>
            <div v-else-if="noTitleKey === 'user'">
                <div class="list-box">
                    <div class="form-filter">
                        <a-button type="primary" class="btn-sub" @click="getAdd">添加</a-button>
                    </div>
                    <a-table :columns="columns" :pagination="pagination" :scroll="{ x: 1500}"
                        :loading="loading" :data-source="user_list" @change="handleTableChange">
                        <template #bodyCell="{ column, record }">
                            
                            <template v-if="column.key === 'id'">
                                <span>
                                {{ record.id }}
                                </span>
                            </template>
                            <template v-if="column.key === 'title'">
                                <span>
                                {{ record.title }}
                                </span>
                            </template>
                            <template v-else-if="column.key === 'types'">
                                <span>
                                    <a-tag color="green" v-if="record.types == 10">全部用户</a-tag>
                                    <a-tag color="cyan" v-else-if="record.types == 20">部分用户</a-tag>
                                    <span v-else>--</span>
                                </span>
                            </template>
                            <template v-else-if="column.key === 'status'">
                                <span>
                                    <a-tag color="green" v-if="record.status == 10">正常</a-tag>
                                    <a-tag color="cyan" v-else-if="record.status == 20">关闭</a-tag>
                                    <span v-else>--</span>
                                </span>
                            </template>
                            <template v-else-if="column.key === 'attachment'">
                                <span>
                                    <a :href="getImgUrl(record.attachment)" rel="noopener noreferrer"> {{  getExtractString(record.attachment) }}</a>
                                </span>
                                <span>
                                    <a @click="seeMore(record)">查看更多</a>
                                </span>
                            </template>
                            <template v-if="column.key === 'created_at'">
                                <span>
                                {{ store.timestampChangDate(record.created_at * 1000) || '--' }}
                                </span>
                            </template>
                            <template v-if="column.key === 'deadline'">
                                <span>
                                {{ store.timestampChangDate(record.deadline * 1000) || '--' }}
                                </span>
                            </template>
                            <template v-if="column.key === 'desc'">
                                <a-tooltip placement="top" v-if="record.desc.length > 40">
                                    <template #title>
                                        <span>{{ record.desc }}</span>
                                    </template>
                                    <span>
                                    {{ record.desc }}
                                    </span>
                                </a-tooltip>
                                <span v-else>
                                    {{ record.desc }}
                                </span>
                            </template>
                            <template v-else-if="column.key === 'action'">
                                <span style="margin-right: 10px">
                                <a @click="handleUpdate(record)">编辑</a>
                                </span>
                                <span>
                                    <a-popconfirm title="是否删除吗？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record.id)"> 
                                        <template #icon><question-circle-outlined style="color: red" /></template>
                                        <a>删除</a>
                                    </a-popconfirm>
                                </span>
                            </template>
                        </template>
                    </a-table>
                </div>
            </div>
            <template #tabBarExtraContent>
                <a @click="handleBatchImport" style="margin-right:15px">批量导入</a>
                <a @click="handleAdd" style="margin-right:15px">添加成员</a>
                <a @click="handleSearch">搜索</a>
            </template>
        </a-card>
        <a-modal v-model:open="isShowAdd" :title="'会员用户'" width="700px" ok-text="" cancel-text="" @cancel="resetForm" :footer="null">
            <div class="live-left">
                <a-form
                    ref="formRef"
                    :model="formState2"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-form-item ref="title" label="学员账号" name="mobile">
                        <a-input v-model:value="formState2.mobile" class="input-item-dd" placeholder="请输入学员账号" />
                    </a-form-item>
                    <a-form-item ref="sort" label="学员昵称" name="nick_name">
                        <a-input v-model:value="formState2.nick_name" class="input-item-dd" placeholder="请输入学员昵称" />
                    </a-form-item>
                    <a-form-item ref="password" label="学员密码" :name="[type == 'add' ? 'password' : '']">
                        <a-input-password v-model:value="formState2.password" :disabled="type == 'add' ? false : true" placeholder="请输入学员密码" />
                    </a-form-item>
                    <a-form-item label="学员头像" name="thumbnail">
                        <a-upload   class="cover-g" name="avatar" list-type="picture-card" :show-upload-list="false" :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove" :customRequest="handleUpload">
                            <!-- <img v-if="imageUrl" :src="imageUrl" alt="" /> -->
                            <div v-if="imageUrl" class="cover-image">
                                <img v-if="imageUrl" :src="imgUrl(imageUrl)" alt="" />
                            </div>
                            <div v-else>
                                <loading-outlined v-if="uploading"></loading-outlined>
                                <PictureOutlined v-else :style="{fontSize: '22px'}" />
                                <div class="ant-upload-text">上传头像</div>
                            </div>
                        </a-upload>
                    </a-form-item>
                    <a-form-item label="学员性别" name="gender">
                        <!-- <a-select v-model:value="formState2.gender" placeholder="请选择学员性别">
                            <a-select-option :value="1">男</a-select-option>
                            <a-select-option :value="2">女</a-select-option>
                        </a-select> -->
                        <a-radio-group v-model:value="formState2.gender" name="radioGroup">
                            <a-radio :value="1">男</a-radio>
                            <a-radio :value="2">女</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="学员权限" name="permission">
                        <!-- <a-select v-model:value="formState2.permission" placeholder="请选择学员权限">
                            <a-select-option :value="10">非会员</a-select-option>
                            <a-select-option :value="20">会员</a-select-option>
                        </a-select> -->
                        <a-radio-group v-model:value="formState2.permission" name="radioGroup2">
                            <a-radio :value="10">正常</a-radio>
                            <a-radio :value="20">会员</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item name="expire_time" label="到期时间" v-if="formState2.permission == 20">
                        <a-date-picker
                            style="margin-top:0px"
                            v-model:value="formState2['expire_time']"
                            show-time
                            showNow
                            placeholder="请选择时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 24, offset: 4 }" style="text-align: right;">
                        <a-button class="btn-ss" type="primary" @click="start" :loading="state.loading">提交</a-button>
                        <a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
                    </a-form-item>
                </a-form>
                <!-- <div>
                    <a-button type="primary" :disabled="!hasSelected" :loading="state.loading" @click="start">
                        添加
                    </a-button>
                </div>
                <a-table
                    :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
                    :columns="user_columns"
                    :data-source="user_list"
                    :loading="user_loading"
                    :pagination="pagination2"
                     row-key="id"
                    @change="handleTableChange2"
                >
                   <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'id'">
                            <span>
                                {{ record.id }}
                            </span>
                        </template>
                        <template v-if="column.key === 'nick_name'">
                            <span>
                               {{ record.nick_name }}
                            </span>
                        </template>
                        <template v-if="column.key === 'gender'">
                            <span v-if="record.gender == 1">男</span>
                            <span v-else-if="record.gender == 2">女</span>
                            <span v-else>--</span>
                        </template>
                        <template v-if="column.key === 'mobile'">
                                <span>
                                {{ record.mobile }}
                                </span>
                            </template>
                    </template>
                </a-table> -->
            </div>
        </a-modal>
        <a-modal v-model:open="isShowAttachment" :title="'附件'" width="700px" ok-text="" cancel-text="" :footer="null">
            <div class="live-left">
                <div>
                    1752027433647_r5ltw0.docx
                    <!-- <a :href="getImgUrl(record.attachment)" rel="noopener noreferrer"> {{  getExtractString(record.attachment) }}</a> -->
                </div>
            </div>
        </a-modal>
        <a-modal v-model:open="isBatchImport" :title="'批量导入'" width="700px" ok-text="" cancel-text="" :footer="null">
            <div class="live-left">
                <div>
                    <a-form
                    ref="formRef"
                    :model="formState3"
                    :rules="rules3"
                    >
                        <a-form-item ref="title" label="文件" name="file">
                            <a-upload :file-list="fileList3" :max-count="1" accept=".doc,.docx,.pdf,.xlsx,.xls" :before-upload="beforeUpload3" @remove="handleRemove3">
                                <a-button>
                                    <upload-outlined></upload-outlined>
                                    上传文件
                                </a-button>
                            </a-upload>
                        </a-form-item>
                        <a-form-item ref="title" label="" name="file" v-if="importInfo.count">
                            <div style="line-height: 30px;color: red;display: flex">
                                <div> 导入数量：{{  importInfo.count }}</div>
                                <div style="margin: 0 36px;"> 导入成功：{{  importInfo.success }}</div>
                                <div> 导入失败：{{  importInfo.fail }}</div>
                            </div>
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 24, offset: 4 }" style="text-align: right;">
                            <a-button class="btn-ss" type="primary" @click="handleUpload3" :loading="loading3">提交</a-button>
                            <a-button style="margin-left: 10px" @click="resetForm3">取消</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
        </a-modal>
        <!-- 搜索 -->
        <a-modal v-model:open="isShowSearch" :title="'搜索'" width="800px" ok-text="" cancel-text="" :footer="null">
            <div class="list-box">
                <div class="form-filter">
                    <a-form layout="inline" :model="formState" >
                        <a-form-item label="昵称">
                            <a-input v-model:value="formState.name" placeholder="请输入昵称" />
                        </a-form-item>
                        <a-form-item label="手机号">
                            <a-input v-model:value="formState.mobile" placeholder="请输入手机号" />
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" class="btn-ss" @click="onSubmit">搜索</a-button>
                            <!-- <a-button style="margin: 0 20px;" @click="onCancel">取 消</a-button> -->
                            <a-button type="primary" class="btn-sub" @click="onAdd" style="margin: 0 0 0 20px;">添加</a-button>
                        </a-form-item>
                    </a-form>
                </div>
                <a-descriptions title="" bordered size="small" v-if="JSON.stringify(user) !== '{}'">
                    <a-descriptions-item label="学员账号">{{userInfo.mobile || '-'}}</a-descriptions-item>
                    <a-descriptions-item label="昵称">{{ userInfo.nick_name || '-'}}</a-descriptions-item>
                    <a-descriptions-item label="头像">
                       <img :src="userInfo.avatar" alt="" class="thumbnail_" v-if="userInfo.avatar">
                       <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="性别">
                        <span v-if="userInfo.gender == 1">男</span>
                        <span v-else-if="userInfo.gender == 2">女</span>
                        <span v-else>--</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="简介">
                        {{ userInfo.intro || '-' }}
                    </a-descriptions-item>
                    <a-descriptions-item label="创建时间">
                        {{ userInfo.created_at || '-'}}
                    </a-descriptions-item>
                    <a-descriptions-item label="更新时间">
                        {{ userInfo.updated_at || '-' }}
                    </a-descriptions-item>
                    <a-descriptions-item label="会员过期时间">
                        <span>
                        {{ userInfo.status  || '-'}}
                        </span>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
        </a-modal>
    </div>
</template>

<style scoped>
.classesMember{
    padding: 15px;
}
.top-content-p{
    background-color: #fff;
    /* padding: 10px 15px;
    border-radius: 6px; */
}
.title-item-p{
    line-height: 40px;
    font-weight: bold;
    font-size: 16px;
}
.content-box{
    display: flex;
    flex-wrap: wrap;
    margin: 6px 0;
}
.name-item{
    line-height: 36px;
    min-width: 200px;
    color: #333;
    margin-right: 50px;
}
.name-item span{
    color: #000;
    margin-left:4px;
}
.content-ssv{
    color: #000;
    margin-left:4px;
}
.btn-ss{
    background-color: #fe5d26;
    height: 32px;
}
.btn-ss:hover{
    background-color: #fe5d26;
}
.btn-sub{
    background-color: #87d068;
    height: 32px;
}
.btn-sub:hover{
    background-color: #87d068;
}
.list-box{
    margin-top: 15px;
}

.form-filter{
   margin: 20px 0;   
   display: flex;
   justify-content: flex-end;
}
.thumbnail_{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.cover-g{
    /* background-color: rgb(51,52,63); */
    width: 130px;
    height: 132px;
    line-height: 26px;
    text-align: center;
    padding: 10px 0;
    border-radius: 10px;
}
.cover-image{
    width: 100%;
    height: 100%;
}
.cover-image img{
    width: 100%;
    height: 100%;
}
.live-left{
    margin-top: 30px;
}
</style>
